<template>
	<view class="content">
		<view>
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button"
				activeColor="#ffd524" style="width: 95%; margin: 2px auto;"></uni-segmented-control>
			<view v-show="current === 0">
				<view class="like">
					<image src="http://ryzzj0o9e.hn-bkt.clouddn.com/default_head/%E6%9F%AF%E5%9F%BA.png"></image>
					<view class="like-info">
						<view>小狗免费领养啊互动哈里斯健康的哈</view>
						<view class="collect-sum">20人已点赞</view>
						<image src="http://ryzzj0o9e.hn-bkt.clouddn.com/default_head/%E6%9F%AF%E5%9F%BA.png"></image>
						<view class="nike-name">小柚子吃不饱</view>
						<uni-icons :type="heart" size="24" :color="likeIconColor" style="position: absolute; bottom: 0; right: 7px;" ></uni-icons>
					</view>
				</view>
			</view>
			
				
			<view v-show="current === 1">
				<view class="like">
					<image src="http://ryzzj0o9e.hn-bkt.clouddn.com/default_head/%E6%9F%AF%E5%9F%BA.png"></image>
					<view class="like-info">
						<view>小狗免费领养啊互动哈里斯健康的哈</view>
						<view class="collect-sum">20人已收藏</view>
						<image src="http://ryzzj0o9e.hn-bkt.clouddn.com/default_head/%E6%9F%AF%E5%9F%BA.png"></image>
						<view class="nike-name">小柚子吃不饱</view>
						<uni-fav :checked="checkList[2]" class="favBtn" :circle="true" bg-color="#cdcdcd"
							bg-color-checked="#ffd524" fg-color="#ffffff" fg-color-checked="#ffffff"
							@click="favClick(2)" />
					</view>
				</view>
				
				<view class="like">
					<image src="http://ryzzj0o9e.hn-bkt.clouddn.com/default_head/%E6%9F%AF%E5%9F%BA.png"></image>
					<view class="like-info">
						<view>小狗免费领养啊互动哈里斯健康的哈</view>
						<view class="collect-sum">20人已收藏</view>
						<image src="http://ryzzj0o9e.hn-bkt.clouddn.com/default_head/%E6%9F%AF%E5%9F%BA.png"></image>
						<view class="nike-name">小柚子吃不饱</view>
						<uni-fav :checked="checkList[2]" class="favBtn" :circle="true" bg-color="#cdcdcd"
							bg-color-checked="#ffd524" fg-color="#ffffff" fg-color-checked="#ffffff"
							@click="favClick(2)" />
					</view>
				</view>
				
				<view class="like">
					<image src="http://ryzzj0o9e.hn-bkt.clouddn.com/default_head/%E6%9F%AF%E5%9F%BA.png"></image>
					<view class="like-info">
						<view>小狗免费领养啊互动哈里斯健康的哈</view>
						<view class="collect-sum">20人已收藏</view>
						<image src="http://ryzzj0o9e.hn-bkt.clouddn.com/default_head/%E6%9F%AF%E5%9F%BA.png"></image>
						<view class="nike-name">小柚子吃不饱</view>
						<uni-fav :checked="checkList[2]" class="favBtn" :circle="true" bg-color="#cdcdcd"
							bg-color-checked="#ffd524" fg-color="#ffffff" fg-color-checked="#ffffff"
							@click="favClick(2)" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			const index = parseInt(option.index);
			// 根据参数展示对应页面
			this.current = index;
		},

		data() {
			return {
				items: ['点赞', '收藏'],
				current: 0,
				checkList: [false, false, false, false, false, false],
				likeIconColor: '#fabdcc',
				heart:'heart-filled'
			};
		},

		methods: {
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			favClick(index) {
				this.checkList[index] = !this.checkList[index]
				this.$forceUpdate()
			}
		}
	};
</script>

<style>
	.like {
		width: 95%;
		display: flex;
		margin: 20px auto
	}

	@media only screen and (min-width: 375px) and (max-width: 500px) {
		.like>image {
			border-radius: 10px;
			margin: 2px;
			width: 25%;
			height: 95px;
		}

		.like-info {
			height: 95px;
			width: 70%;
			margin-left: 8px;
			position: relative;
		}

		.like-info>image {
			width: 25px;
			height: 25px;
			border-radius: 50%;
			position: absolute;
			bottom: 0;
		}
	}

	@media only screen and (min-width: 768px) and (max-width: 1200px) {
		.like>image {
			border-radius: 10px;
			margin: 2px;
			width: 25%;
			height: 195px;
		}	
		.like-info {
			height: 195px;
			width: 70%;
			margin-left: 8px;
			position: relative;
		}
		
		.like-info>image {
			width: 25px;
			height: 25px;
			border-radius: 50%;
			position: absolute;
			bottom: 0;
		}
		
	}
	
	
	.favBtn{
		position: absolute;
		bottom: 0;
		right: 2px;
	}
	.nike-name{
		position: absolute;
		color: #000;
		bottom: 2px;
		font-size: 15px;
		left: 28px;
	}
	.collect-sum{
		position: absolute;
		color: #cdcdcd;
		font-size: 10px;
	}
</style>